import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "认证中心 - 全栈应用",
  description: "安全的用户认证系统",
};

interface AuthLayoutProps {
  children: React.ReactNode;
}

export default function AuthLayout({ children }: AuthLayoutProps) {
  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* 左侧品牌展示区域 - 桌面端显示 */}
      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-600 via-blue-500 to-purple-600 relative overflow-hidden">
        {/* 背景装饰 */}
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
        
        {/* 装饰性几何图案 */}
        <div className="absolute -top-1/2 -right-1/2 w-full h-full bg-white/10 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-1/2 -left-1/2 w-full h-full bg-white/5 rounded-full blur-3xl"></div>
        
        {/* 内容区域 */}
        <div className="relative z-10 flex flex-col justify-center items-center p-12 text-white">
          <div className="max-w-md text-center">
            {/* Logo/品牌图标 */}
            <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-8 mx-auto backdrop-blur-sm">
              <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center">
                <span className="text-blue-600 text-2xl font-bold">FS</span>
              </div>
            </div>
            
            {/* 主标题 */}
            <h1 className="text-4xl font-bold mb-4 leading-tight">
              欢迎来到
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 to-white">
                全栈应用平台
              </span>
            </h1>
            
            {/* 副标题 */}
            <p className="text-xl text-blue-100 mb-8 leading-relaxed">
              安全、快速、现代化的用户体验
              <br />
              让创新从这里开始
            </p>
            
            {/* 特性列表 */}
            <div className="space-y-3 text-left">
              {[
                "🔐 企业级安全认证",
                "⚡ 极速响应体验", 
                "🛡️ 数据隐私保护",
                "🌟 现代化界面设计"
              ].map((feature, index) => (
                <div key={index} className="flex items-center space-x-3 text-blue-100">
                  <span className="text-lg">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 右侧认证表单区域 */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
        <div className="w-full max-w-md">
          {children}
        </div>
      </div>
    </div>
  );
} 